<template>
  <div class="column">
    <router-view/>
    <div class="panelLabel">
      <h1>地区生产总值{{year}}年度任务：</h1>
      <h1>总量&nbsp;</h1>
      <h3>{{total}} 亿元&nbsp; &nbsp; &nbsp; &nbsp; </h3>
      <h1>增速&nbsp;</h1>
      <h3 v-bind:style="{ color: color1 }">{{growthRate}} %&nbsp; &nbsp; &nbsp; &nbsp; </h3>
      <h1>完成度&nbsp;</h1>
      <h3>{{schedule}} %</h3>
      <div class="panelLabel-foot"></div>
    </div>
    <div class="panelSmLong" >
      <div class="boxb"><h2>{{year}}年季度地区生产总值</h2></div>
      <div class="panelSmLong1">
        <v-chart class="chart" :option="option1" :autoresize="true"></v-chart>
      </div>
      <div class="panelSmLong-foot"></div>
    </div>
    <div class="panelSmLong">
      <div class="boxb"><h2>{{year}}年季度累计生产总值</h2></div>
      <div class="panelSmLong1">
        <v-chart class="chart" :option="option3" :autoresize="true"></v-chart>
      </div>
      <div class="panelSmLong-foot"></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import * as echarts from "echarts";
export default {
  name: "jj1",
  mounted() {
    this.$parent.reverseColor1();
  },
  methods: {
    getdata1() {
      axios.get('http://localhost:9090/economicIndicators/getQuarterlyGrossRegionalProduct',{
        params:{
          year:this.year,
        }
      }).then(res=>{
        if (res.data[0]==null) {
          this.option1.series[0].data = [0,0,0,0]
          return
        }
        for (var i =0 ;i < res.data.length;i++) {
           this.data1[i] = res.data[i].quarterValue
        }
        this.option1.series[0].data = this.data1
      })
    },
    getdata2() {
      axios.get('http://localhost:9090/economicIndicators/getQuarterlyGrossRegionalProduct',{
        params:{
          year:this.year,
        }
      }).then(res=>{
        if (res.data[0]==null) {
          this.data2[i] = [0,0,0,0]
          return
        }
        for (var i =0 ;i < res.data.length;i++) {
          this.data2[i] = res.data[i].quarterOnQuarter
        }
      })
    },
    getdata3() {
      axios.get('http://localhost:9090/economicIndicators/getAccumulatedQuarterlyGrossRegionalProduct',{
        params:{
          year:this.year,
        }
      }).then(res=>{
        if (res.data[0]==null) {
          this.option3.series[1].data = [0,0,0,0]
          this.option3.series[2].data = [0,0,0,0]
          return
        }
        for (var i =0 ;i < res.data.length;i++) {
          this.data3[i] = res.data[i].quarterValue
        }
        this.option3.series[1].data = this.data3
        this.option3.series[2].data = this.data3
      })
    },
    getdata4() {
      axios.get('http://localhost:9090/economicIndicators/getAccumulatedQuarterlyGrossRegionalProduct',{
        params:{
          year:this.year,
        }
      }).then(res=>{
        if (res.data[0]==null) {
          this.option3.series[3].data = [0,0,0,0]
          return
        }
        for (var i =0 ;i < res.data.length;i++) {
          this.data4[i] = res.data[i].quarterOnQuarter
        }
        this.option3.series[3].data = this.data4
      })
    },
    gettop(){
      axios.get('http://localhost:9090/economicIndicators/getAnnualTasks',{
        params:{
          year:this.year,
          indicators:'地区生产总值',
        }
      }).then(res=>{
        this.total = res.data.total;
        this.growthRate = res.data.growthRate;
        this.schedule = res.data.schedule;
        if(Number(res.data.growthRate)>0){
          this.color1 = 'green'
        }else{
          this.color1 = 'red'
        }
      })
    },
  },

  watch: {
    '$parent.selectedYear': {
      immediate: true,
      handler(v) {
        this.year = v
        this.gettop();
        this.getdata1();
        this.getdata2();
        this.getdata3();
        this.getdata4();
      }
    }
  },


  data() {
    return {
      color1:'',
      newDate: new Date(),

      data1 : [0,0,0,0],
      data2 : [0,0,0,0],
      data3 : [0,0,0,0],
      data4 : [0,0,0,0],
      total:'',
      growthRate:'',
      schedule:0,
      year:this.$parent.selectedYear,
      month:this.$parent.selectedMonth,

      option1 : {
        tooltip: {
          backgroundColor: "#00194A",
          trigger: 'axis',
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
          formatter: ((params)=>{
            return `<div style="font-size:15px;">${params[0].axisValue}</div>
              <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">季度值：</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 18px;">${this.data1[params[0].dataIndex]}</p>
                <p style="display: inline;color: rgba(18, 224, 254, 1);font-size: 14px; ">亿元</p>
              </div>
              <div style="font-size:16px;margin-top:5px;">
                <p style="display: inline;color: #87CEEB;font-size: 15px;">季度累计同比：</p>
                <p style="display: inline;color: lawngreen;font-size: 18px;">${this.data2[params[0].dataIndex]}</p>
                <p style="display: inline;color: lawngreen;font-size: 14px; ">%</p>
              </div>`;
          })
        },
        legend: {
          right:"10%",
          textStyle:{
            color:'#7FFF00'
          },
          data: ['地区生产总值']
        },
        grid: {
          top:'20%',
          left: '3%',
          right: '4%',
          bottom: '3%',
          show:true,
          borderColor:"#012f4a",
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['第一季度', '第二季度', '第三季度', '第四季度'],
          axisTick:{
            show:false
          },
          axisLabel:{
            textStyle: {
              color: '#97C9FF',
              fontSize:'12',
            },
            color:'#4c9bfd'
          },
          axisLine:{
            show:true
          }
        },
        yAxis: {
          name:'(亿元)',
          nameTextStyle:{
            color: '#97C9FF',
            fontSize:10,
          },
          type: 'value',
          axisTick:{
            show:false
          },
          axisLabel:{
            textStyle: {
              color: '#97C9FF',
              fontSize:'12',
            },
            color:'#4c9bfd'
          },
          axisLine:{
            show:false
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              opacity: 0.5
            }
          },
        },
        series: [
          {
            name: '地区生产总值',
            type: 'line',
            symbolSize: '8',
            stack: 'Total',
            itemStyle : {
              normal : {
                color:'write', //改变折线点的颜色
                lineStyle:{
                  color:'#7FFF00' //改变折线颜色
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      0,
                      1,
                      [
                        {
                          offset: 0,
                          color: "rgba(127, 255, 0, 0.75)",
                        },
                        {
                          offset: 1,
                          color: "rgba(114, 178, 255, 0)",
                        },
                      ],
                      false
                  ),
                  opacity: 1,
                },
              }
            },
            data: [0,0,0,0],
          }
        ]
      },

      option3:{
        tooltip: {
          trigger: 'item',
        },
        grid: {
          left: '10%',
          right: '10%',
          top: '20%',
          bottom: '20%'
        },
        color:['#4472C5','#ED7C30'],
        legend: {
          orient:'horizontal',
          right: '12.5%',
          textStyle: {
            color: '#A1D5FF',
            fontSize: 12
          },
        },
        xAxis: [{
          data: ['第一季度','第二季度','第三季度','第四季度'],
          show: true,
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#97C9FF',
              fontSize:'12'
            },
            margin: 15 // 刻度标签与轴线之间的距离。
          },
          axisLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: 'gray',
              opacity: 1
            }
          },
          axisTick: {
            show: false
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            width: 0.08,
            lineStyle: {
              type: "solid",
              color: "#03202E"
            }
          }
        }],
        yAxis: [{
          name: '(亿元)',
          nameTextStyle: {
            align: 'left',
            color: '#97C9FF',
            padding: [0, 0, 0, -25],
            fontSize:10,
          },
          //背景网格为虚线
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              opacity: 0.5
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#97C9FF',
              fontSize:'12',
            }
          }
          },
          {
            show: true,
            name: '(%)',
            nameTextStyle: {
              color: '#97C9FF',
              fontSize:12,
            },
            splitLine: { show: false },
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: {
              textStyle: {
                color: '#97C9FF',
                fontSize:'12',
              }
            }
          }],
        series: [
          {
            'name': '',
            'type': 'pictorialBar',
            'symbolSize': [32, 25],
            'symbolOffset': [0, 10],
            'z': 12,
            itemStyle: {
              opacity: 1,
              color: function(params) {
                var a = params.name.slice(0, 2)
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#12B9DB' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#6F8EF2' // 100% 处的颜色
                }], false)
              }
            },
            'data': [0, 0, 0, 0]
          },
          {
            type: 'bar',
            barWidth: 32,
            barGap: '-100%',
            itemStyle: { // lenged文本
              opacity: 0.7,
              color: function(params) {
                var a = params.name.slice(0, 2)
                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#12B9DB' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#6F8EF2' // 100% 处的颜色
                }], false)
              }
            },
            data: this.data3,
          },
          {
            'name': '累计生产总值',
            'type': 'pictorialBar',
            'symbolSize': [32, 25],
            'symbolOffset': [0, -10],
            'z': 5,
            itemStyle: {
              opacity: 1,
              color: function(params) {
                var a = params.name.slice(0, 2)

                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#12B9DB' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#6F8EF2' // 100% 处的颜色
                }], false)
              }
            },
            'symbolPosition': 'end',
            'data': this.data3,
          },
          {
            name: '同比',
            'z': 9,
            yAxisIndex: 1,
            type: 'line',
            data: this.data4,
            symbolSize: '8',//折线图原点大小
            lineStyle: {
              normal: {
                width: 3,
                color: '#ffbb00' // 线条颜色
              },
              borderColor: 'rgba(0,0,0,.4)'
            },
          }
        ]
      }
    }
  }
}
</script>

<style scoped>

</style>